<template>
	<view class="home">
		<!-- 顶部轮播图部分 -->
		<u-swiper :list="slides" @change="e => current = e.current" height="328rpx" :autoplay="true" keyName="img_url"
			circular>
			<view slot="indicator" class="indicator">
				<view class="indicator__dot" v-for="(item, index) in slides" :key="index"
					:class="[index === current && 'indicator__dot--active']">
				</view>
			</view>
		</u-swiper>
		<!-- tab栏目部分 -->
		<view class="tab">
			<u-tabs :itemStyle=tabStyle lineHeight='4' :list="sortList" @click="tabClick"></u-tabs>
		</view>
		<!-- 商品展示部分 -->
		<u-row class="goods-list" v-if="goodsList.length">
			<u-col span=6 v-for="item,index in goodsList">
				<goods-card :goods='item'></goods-card>
			</u-col>
			<u-col>
				<u-loadmore status='loading' line></u-loadmore>
			</u-col>
		</u-row>
		
		<!-- 骨架屏 -->
		<u-row class="goods-list" v-else>
			<u-col span=6 v-for="item,index in 6">
				<view url="" class="goods-item">
					<u-skeleton :loading="true" titleWidth=100% titleHeight=300rpx rows="2" rowsHeight=33rpx
						:rowsWidth="['100%','100%']">
					</u-skeleton>
				</view>
			</u-col>
		</u-row>
		<!-- 返回顶部按钮部分 -->
		<u-back-top :scroll-top="scrollTop" :duration='150'></u-back-top>
	</view>
</template>

<script>
	import {
		getIndex
	} from '../../config/api.js';

	export default {
		data() {
			return {
				// 轮播图数据
				slides: [],
				// 轮播图索引
				current: 0,
				// tab栏目数据
				sortList: [{
						name: "销量"
					},
					{
						name: "推荐"
					},
					{
						name: "最新"
					},
				],
				// tab栏目样式
				tabStyle: {
					height: '80rpx',
					padding: '0 70rpx'
				},
				// 商品数据
				goodsList: [],
				// 商品页数
				goodsPage: 1,
				// 商品所属类名索引
				goodsIndex: 0,
				// 滚动跳位置
				scrollTop: 0,
				// 骨架屏显示状态
				showSkeleton: true
			}
		},
		async onLoad() {
			// 获取首页数据
			this.getIndexData()
		},
		methods: {
			// tab栏目点击触发
			tabClick(item) {
				if (item.index === this.goodsIndex) return
				// console.log(item)
				this.goodsIndex = item.index
				// 重置商品数据和分页
				this.goodsList = []
				this.goodsPage = 1
				// 发送请求获取该栏目对应的商品数据
				this.getIndexData()
			},
			// 获取首页数据--->商品数据
			async getIndexData() {
				const params = {
					page: this.goodsPage
				}
				// 判断tabs的索引对应的值
				if (this.goodsIndex === 0) {
					params.sales = 1
				}
				if (this.goodsIndex === 1) {
					params.recommend = 1
				}
				if (this.goodsIndex === 2) {
					params.new = 1
				}
				// 拿到首页数据
				const indexData = await getIndex({
					params
				})
				// 将数据并入数组中
				// this.goodsList.push(...indexData.goods.data)
				// 商品数据
				this.goodsList = [...this.goodsList, ...indexData.goods.data]
				// 轮播图数据
				if (!this.slides.length) {
					this.slides = indexData.slides
				}
			},
			// 下拉到底部触发函数
			onReachBottom() {
				this.goodsPage++
				this.getIndexData()
			},
			// 滚动监听
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			}
		}
	}
</script>

<style lang="scss">
	// 轮播图指示器样式
	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 15rpx;
			width: 15rpx;
			border-radius: 200rpx;
			// background-color: rgba(255, 255, 255, 0.35);
			background-color: rgba(0, 0, 0, 0.3);
			margin: 0 8rpx;
			transition: background-color 0.5s;

			&--active {
				width: 35rpx;
				background-color: rgba(255, 255, 255, 0.8);
			}
		}
	}

		// tab栏目样式
		.tab {
			display: flex;
			justify-content: space-around;
			margin: 20rpx 0;
		}

	// 商品及骨架屏样式
	.goods-list {
		flex-wrap: wrap;
		.goods-item {
			margin: 10rpx 20rpx;
			padding: 20rpx;
			box-shadow: 0 10rpx 20rpx rgba(#000, .3);
		}
	}
</style>
